/* ==================
        初始化
 ==================== */

page {
  background: #f1f1f1;
  font-size: 14px;
  color: #333;
  line-height: 1;
  vertical-align: 2px;
  font-family: Helvetica Neue, Helvetica, sans-serif;
}

view, text, custom, tag, capsule, scroll-view, swiper, button, timeline, form,
form-group, info, bar, input, textarea, label, navigator, list, item, chat, nav,
image {
  box-sizing: border-box;
}

/* ==================
          布局
 ==================== */

/*  -- flex弹性布局 -- */

.flex {
  display: flex;
}

.basis-xs {
  flex-basis: 20%;
}

.basis-sm {
  flex-basis: 40%;
}

.basis-df {
  flex-basis: 50%;
}

.basis-lg {
  flex-basis: 60%;
}

.basis-xl {
  flex-basis: 80%;
}

.flex-sub {
  flex: 1;
}

.flex-twice {
  flex: 2;
}

.flex-treble {
  flex: 3;
}

.flex-direction {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-center {
  align-items: center;
}

.align-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

/*  -- 内外边距 -- */

.margin-0 {
  margin: 0 !important;
}

.margin-xs {
  margin: 5px;
}

.margin-sm {
  margin: 10px;
}

.margin {
  margin: 15px;
}

.margin-lg {
  margin: 20px;
}

.margin-xl {
  margin: 25px;
}

.margin-top-xs {
  margin-top: 5px;
}

.margin-top-sm {
  margin-top: 10px;
}

.margin-top {
  margin-top: 15px;
}

.margin-top-lg {
  margin-top: 20px;
}

.margin-top-xl {
  margin-top: 25px;
}

.margin-right-xs {
  margin-right: 5px;
}

.margin-right-sm {
  margin-right: 10px;
}

.margin-right {
  margin-right: 15px;
}

.margin-right-lg {
  margin-right: 20px;
}

.margin-right-xl {
  margin-right: 25px;
}

.margin-bottom-xs {
  margin-bottom: 5px;
}

.margin-bottom-sm {
  margin-bottom: 10px;
}

.margin-bottom {
  margin-bottom: 15px;
}

.margin-bottom-lg {
  margin-bottom: 20px;
}

.margin-bottom-xl {
  margin-bottom: 25px;
}

.margin-left-xs {
  margin-left: 5px;
}

.margin-left-sm {
  margin-left: 10px;
}

.margin-left {
  margin-left: 15px;
}

.margin-left-lg {
  margin-left: 20px;
}

.margin-left-xl {
  margin-left: 25px;
}

.margin-lr-xs {
  margin-left: 5px;
  margin-right: 5px;
}

.margin-lr-sm {
  margin-left: 10px;
  margin-right: 10px;
}

.margin-lr {
  margin-left: 15px;
  margin-right: 15px;
}

.margin-lr-lg {
  margin-left: 20px;
  margin-right: 20px;
}

.margin-lr-xl {
  margin-left: 25px;
  margin-right: 25px;
}

.margin-tb-xs {
  margin-top: 5px;
  margin-bottom: 5px;
}

.margin-tb-sm {
  margin-top: 10px;
  margin-bottom: 10px;
}

.margin-tb {
  margin-top: 15px;
  margin-bottom: 15px;
}

.margin-tb-lg {
  margin-top: 20px;
  margin-bottom: 20px;
}

.margin-tb-xl {
  margin-top: 25px;
  margin-bottom: 25px;
}

.padding-0 {
  padding: 0 !important;
}

.padding-xs {
  padding: 5px;
}

.padding-sm {
  padding: 10px;
}

.padding {
  padding: 15px;
}

.padding-lg {
  padding: 20px;
}

.padding-xl {
  padding: 25px;
}

.padding-top-xs {
  padding-top: 5px;
}

.padding-top-sm {
  padding-top: 10px;
}

.padding-top {
  padding-top: 15px;
}

.padding-top-lg {
  padding-top: 20px;
}

.padding-top-xl {
  padding-top: 25px;
}

.padding-right-xs {
  padding-right: 5px;
}

.padding-right-sm {
  padding-right: 10px;
}

.padding-right {
  padding-right: 15px;
}

.padding-right-lg {
  padding-right: 20px;
}

.padding-right-xl {
  padding-right: 25px;
}

.padding-bottom-xs {
  padding-bottom: 5px;
}

.padding-bottom-sm {
  padding-bottom: 10px;
}

.padding-bottom {
  padding-bottom: 15px;
}

.padding-bottom-lg {
  padding-bottom: 20px;
}

.padding-bottom-xl {
  padding-bottom: 25px;
}

.padding-left-xs {
  padding-left: 5px;
}

.padding-left-sm {
  padding-left: 10px;
}

.padding-left {
  padding-left: 15px;
}

.padding-left-lg {
  padding-left: 20px;
}

.padding-left-xl {
  padding-left: 25px;
}

.padding-lr-xs {
  padding-left: 5px;
  padding-right: 5px;
}

.padding-lr-sm {
  padding-left: 10px;
  padding-right: 10px;
}

.padding-lr {
  padding-left: 15px;
  padding-right: 15px;
}

.padding-lr-lg {
  padding-left: 20px;
  padding-right: 20px;
}

.padding-lr-xl {
  padding-left: 25px;
  padding-right: 25px;
}

.padding-tb-xs {
  padding-top: 5px;
  padding-bottom: 5px;
}

.padding-tb-sm {
  padding-top: 10px;
  padding-bottom: 10px;
}

.padding-tb {
  padding-top: 15px;
  padding-bottom: 15px;
}

.padding-tb-lg {
  padding-top: 20px;
  padding-bottom: 20px;
}

.padding-tb-xl {
  padding-top: 25px;
  padding-bottom: 25px;
}

/* -- 浮动 --  */

.cf::after, .cf::before {
  content: " ";
  display: table;
}

.cf::after {
  clear: both;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* ==================
          图片
 ==================== */

image {
  max-width: 100%;
  border: 0;
  display: inline-block;
  position: relative;
  z-index: 0;
}

image::before {
  content: "";
  /* background: #f5f5f5; */
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -2;
}

image.png::before, image.png::after {
  display: none;
}

image::after {
  /* LY注释 */
  /* content: "\e7f1"; */ 
  font-family: "iconfont";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  line-height: 16px;
  right: 0;
  bottom: 0;
  z-index: -1;
  font-size: 16px;
  margin: auto;
  color: #ccc;
  -webkit-animation: icon-spin 2s infinite linear;
  animation: icon-spin 2s infinite linear;
  display: block;
}

/* ==================
         开关
 ==================== */

switch, checkbox, radio {
  position: relative;
}

switch::after {
  font-family: "iconfont" !important;
  content: "\e645";
  position: absolute;
  color: #fff;
  top: 50%;
  margin-top: -8px;
  left: 10px;
  font-size: 16px;
  line-height: 16px;
  pointer-events: none;
  transform: scale(0, 0);
  transition: all 0.3s ease-in-out 0s;
}

switch[checked]::after {
  transform: scale(1, 1);
}

switch::before {
  font-family: "iconfont" !important;
  content: "\e646";
  position: absolute;
  color: #fff;
  top: 50%;
  margin-top: -8px;
  right: 10px;
  font-size: 16px;
  line-height: 16px;
  pointer-events: none;
  transform: scale(1, 1);
  transition: all 0.3s ease-in-out 0s;
  z-index: 9;
}

radio::before, checkbox::before {
  font-family: "iconfont" !important;
  content: "\e645";
  position: absolute;
  color: #fff;
  top: 50%;
  margin-top: -8px;
  right: 5px;
  font-size: 16px;
  line-height: 16px;
  pointer-events: none;
  transform: scale(1, 1);
  transition: all 0.3s ease-in-out 0s;
  z-index: 9;
}

switch[checked]::before {
  transform: scale(0, 0);
}

switch .wx-switch-input {
  background: #aaa !important;
  border-color: #aaa;
  padding: 0 30px;
  margin: 0;
}

radio-group {
  display: inline-block;
}

radio .wx-radio-input, checkbox .wx-checkbox-input {
  margin: 0;
  width: 24px;
  height: 24px;
}

checkbox.round .wx-checkbox-input {
  border-radius: 50px;
}

switch .wx-switch-input-checked::after {
  margin-left: 10px;
  box-shadow: none;
}

switch.radius .wx-switch-input::after, switch.radius .wx-switch-input,
switch.radius .wx-switch-input::before {
  border-radius: 5px;
}

switch .wx-switch-input::before, radio.radio::before,
checkbox .wx-checkbox-input::before, radio .wx-radio-input::before {
  display: none;
}

radio.radio[checked]::after {
  content: "";
  background: transparent;
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: 999;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 100px;
  border: 8px solid #fff;
}

switch.sm, checkbox.sm, radio.sm {
  transform: scale(0.8);
}

.switch-sex::after {
  content: "\e71c";
}

.switch-sex::before {
  content: "\e71a";
}

.switch-sex .wx-switch-input {
  background: #e54d42 !important;
  border-color: #e54d42;
}

.switch-sex[checked] .wx-switch-input {
  background: #0081ff !important;
  border-color: #0081ff !important;
}

/* ==================
          颜色
 ==================== */

.text-red {
  color: #e54d42 !important;
}

.text-orange {
  color: #f4a040 !important;
}

.text-yellow {
  color: #feb300!important;
}

.text-olive {
  color: #8dc63f !important;
}

.text-green {
  color: #39b54a !important;
}

.text-cyan {
  color: #1cbbb4 !important;
}

.text-blue {
  color: #0081ff !important;
}

.text-purple {
  color: #6739b6 !important;
}

.text-mauve {
  color: #9c26b0 !important;
}

.text-pink {
  color: #e03997 !important;
}

.text-brown {
  color: #a5673f !important;
}

.text-grey {
  color: #8799a3 !important;
}

.text-gray {
  color: #aaa !important;
}

.text-black {
  color: #333 !important;
}

.text-white {
  color: #fff !important;
}

.line-red::after, .lines-red::after, switch.red[checked] .wx-switch-input,
checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
  border-color: #e54d42 !important;
}

.line-orange::after, .lines-orange::after,
switch.orange[checked] .wx-switch-input,
checkbox.orange[checked] .wx-checkbox-input,
radio.orange[checked] .wx-radio-input {
  border-color: #f4a040 !important;
}

.line-yellow::after, .lines-yellow::after,
switch.yellow[checked] .wx-switch-input,
checkbox.yellow[checked] .wx-checkbox-input,
radio.yellow[checked] .wx-radio-input {
  border-color: #feb300!important;
}

.line-olive::after, .lines-olive::after, switch.olive[checked] .wx-switch-input,
checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
  border-color: #8dc63f !important;
}

.line-green::after, .lines-green::after, switch.green[checked] .wx-switch-input,
checkbox.green[checked] .wx-checkbox-input, checkbox[checked] .wx-checkbox-input,
radio.green[checked] .wx-radio-input {
  border-color: #39b54a !important;
}

.line-cyan::after, .lines-cyan::after, switch.cyan[checked] .wx-switch-input,
checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
  border-color: #1cbbb4 !important;
}

.line-blue::after, .lines-blue::after, switch.blue[checked] .wx-switch-input,
checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
  border-color: #0081ff !important;
}

.line-purple::after, .lines-purple::after,
switch.purple[checked] .wx-switch-input,
checkbox.purple[checked] .wx-checkbox-input,
radio.purple[checked] .wx-radio-input {
  border-color: #6739b6 !important;
}

.line-mauve::after, .lines-mauve::after, switch.mauve[checked] .wx-switch-input,
checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
  border-color: #9c26b0 !important;
}

.line-pink::after, .lines-pink::after, switch.pink[checked] .wx-switch-input,
checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
  border-color: #e03997 !important;
}

.line-brown::after, .lines-brown::after, switch.brown[checked] .wx-switch-input,
checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
  border-color: #a5673f !important;
}

.line-grey::after, .lines-grey::after, switch.grey[checked] .wx-switch-input,
checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
  border-color: #8799a3 !important;
}

.line-gray::after, .lines-gray::after, switch.gray[checked] .wx-switch-input,
checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
  border-color: #aaa !important;
}

.line-black::after, .lines-black::after, switch.black[checked] .wx-switch-input,
checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
  border-color: #333 !important;
}

.line-white::after, .lines-white::after, switch.white[checked] .wx-switch-input,
checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
  border-color: #fff !important;
}

.bg-red, switch.red[checked] .wx-switch-input,
checkbox.red[checked] .wx-checkbox-input, radio.red[checked] .wx-radio-input {
  background-color: #e54d42 !important;
  color: #fff !important;
}

.bg-orange, switch.orange[checked] .wx-switch-input,
checkbox.orange[checked] .wx-checkbox-input,
radio.orange[checked] .wx-radio-input {
  background-color: #f4a040 !important;
  color: #fff !important;
}

.bg-yellow, switch.yellow[checked] .wx-switch-input,
checkbox.yellow[checked] .wx-checkbox-input,
radio.yellow[checked] .wx-radio-input {
  background-color: #feb300!important;
  color: #fff !important;
}

.bg-olive, switch.olive[checked] .wx-switch-input,
checkbox.olive[checked] .wx-checkbox-input, radio.olive[checked] .wx-radio-input {
  background-color: #8dc63f !important;
  color: #fff !important;
}

.bg-green, switch.green[checked] .wx-switch-input,
switch[checked] .wx-switch-input, checkbox.green[checked] .wx-checkbox-input,
checkbox[checked] .wx-checkbox-input, radio.green[checked] .wx-radio-input,
radio[checked] .wx-radio-input {
  background-color: #39b54a !important;
  color: #fff !important;
}

.bg-cyan, switch.cyan[checked] .wx-switch-input,
checkbox.cyan[checked] .wx-checkbox-input, radio.cyan[checked] .wx-radio-input {
  background-color: #1cbbb4 !important;
  color: #fff !important;
}

.bg-blue, switch.blue[checked] .wx-switch-input,
checkbox.blue[checked] .wx-checkbox-input, radio.blue[checked] .wx-radio-input {
  background-color: #0081ff !important;
  color: #fff !important;
}

.bg-purple, switch.purple[checked] .wx-switch-input,
checkbox.purple[checked] .wx-checkbox-input,
radio.purple[checked] .wx-radio-input {
  background-color: #6739b6 !important;
  color: #fff !important;
}

.bg-mauve, switch.mauve[checked] .wx-switch-input,
checkbox.mauve[checked] .wx-checkbox-input, radio.mauve[checked] .wx-radio-input {
  background-color: #9c26b0 !important;
  color: #fff !important;
}

.bg-pink, switch.pink[checked] .wx-switch-input,
checkbox.pink[checked] .wx-checkbox-input, radio.pink[checked] .wx-radio-input {
  background-color: #e03997 !important;
  color: #fff !important;
}

.bg-brown, switch.brown[checked] .wx-switch-input,
checkbox.brown[checked] .wx-checkbox-input, radio.brown[checked] .wx-radio-input {
  background-color: #a5673f !important;
  color: #fff !important;
}

.bg-grey, switch.grey[checked] .wx-switch-input,
checkbox.grey[checked] .wx-checkbox-input, radio.grey[checked] .wx-radio-input {
  background-color: #8799a3 !important;
  color: #fff !important;
}

.bg-gray, switch.gray[checked] .wx-switch-input,
checkbox.gray[checked] .wx-checkbox-input, radio.gray[checked] .wx-radio-input {
  background-color: #aaa !important;
  color: #fff !important;
}

.bg-black, switch.black[checked] .wx-switch-input,
checkbox.black[checked] .wx-checkbox-input, radio.black[checked] .wx-radio-input {
  background-color: #333 !important;
  color: #fff !important;
}

.bg-white, switch.white[checked] .wx-switch-input,
checkbox.white[checked] .wx-checkbox-input, radio.white[checked] .wx-radio-input {
  background-color: #fff !important;
  color: #666;
}

.none-bg {
  background-color: transparent !important;
}

button.shadow[class*="-red"] {
  box-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2) !important;
}

button.shadow[class*="-orange"] {
  box-shadow: 3px 3px 4px rgba(203, 224, 140, 0.2) !important;
}

button.shadow[class*="-yellow"] {
  box-shadow: 3px 3px 4px rgba(224, 170, 7, 0.2) !important;
}

button.shadow[class*="-olive"] {
  box-shadow: 3px 3px 4px rgba(124, 173, 55, 0.2) !important;
}

button.shadow[class*="-green"] {
  box-shadow: 3px 3px 4px rgba(48, 156, 63, 0.2) !important;
}

button.shadow[class*="-cyan"] {
  box-shadow: 3px 3px 4px rgba(28, 187, 180, 0.2) !important;
}

button.shadow[class*="-blue"] {
  box-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2) !important;
}

button.shadow[class*="-purple"] {
  box-shadow: 3px 3px 4px rgba(88, 48, 156, 0.2) !important;
}

button.shadow[class*="-mauve"] {
  box-shadow: 3px 3px 4px rgba(133, 33, 150, 0.2) !important;
}

button.shadow[class*="-pink"] {
  box-shadow: 3px 3px 4px rgba(199, 50, 134, 0.2) !important;
}

button.shadow[class*="-brown"] {
  box-shadow: 3px 3px 4px rgba(140, 88, 53, 0.2) !important;
}

button.shadow[class*="-grey"] {
  box-shadow: 3px 3px 4px rgba(114, 130, 138, 0.2) !important;
}

button.shadow[class*="-gray"] {
  box-shadow: 3px 3px 4px rgba(114, 130, 138, 0.2) !important;
}

button.shadow[class*="-black"] {
  box-shadow: 3px 3px 4px rgba(26, 26, 26, 0.2) !important;
}

/* ==================
          文本
 ==================== */

.text-xs {
  font-size: 10px;
}

.text-sm {
  font-size: 12px;
}

.text-df {
  font-size: 14px;
}

.text-lg {
  font-size: 16px;
}

.text-xl {
  font-size: 18px;
}

.text-xxl {
  font-size: 20px;
}

.text-truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text-bold {
  font-weight: bold;
}

.text-content {
  line-height: 1.618;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-del {
  text-decoration: line-through;
}

.text-price::before {
  content: "¥";
  font-size: 68%;
  font-variant: small-caps;
}

/* ==================
          边框
 ==================== */

/* -- 实线 -- */

.solids {
  border: 2px solid #eee;
}

.solids-top {
  border-top: 2px solid #eee;
}

.solids-right {
  border-right: 2px solid #eee;
}

.solids-bottom {
  border-bottom: 2px solid #eee;
}

.solids-left {
  border-left: 2px solid #eee;
}

.solid, .solid-top, .solid-right, .solid-bottom, .solid-left, .dashed,
.dashed-top, .dashed-right, .dashed-bottom, .dashed-left {
  position: relative;
}

.solid::after, .solid-top::after, .solid-right::after, .solid-bottom::after,
.solid-left::after, .dashed::after, .dashed-top::after, .dashed-right::after,
.dashed-bottom::after, .dashed-left::after {
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.5);
  transform-origin: 0 0;
}

.solid::after {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.solid-top::after {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.solid-right::after {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.solid-bottom::after {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.solid-left::after {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

/* -- 虚线 -- */

.dashed::after {
  border: 1px dashed #ddd;
}

.dashed-top::after {
  border-top: 1px dashed #ddd;
}

.dashed-right::after {
  border-right: 1px dashed #ddd;
}

.dashed-bottom::after {
  border-bottom: 1px dashed #ddd;
}

.dashed-left::after {
  border-left: 1px dashed #ddd;
}

/* -- 阴影 -- */

.shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.07);
}

.shadow-alice {
  position: relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.shadow-alice:before, .shadow-alice:after {
  position: absolute;
  content: "";
  top: 10px;
  bottom: 15px;
  left: 10px;
  width: 50%;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
  transform: rotate(-3deg);
  z-index: -1;
}

.shadow-alice:after {
  right: 10px;
  left: auto;
  transform: rotate(3deg);
}

.shadow-blur {
  position: relative;
}

.shadow-blur::before {
  content: "";
  display: block;
  background: inherit;
  filter: blur(5px);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 5px;
  left: 5px;
  z-index: -1;
  opacity: 0.4;
}

/* ==================
          按钮
 ==================== */

.round, button.round, button.round::after, button.icon,
tag[class*="line-"].round::after, .shadow-blur.round::before, button.icon::after {
  border-radius: 5000px !important;
}

tag[class*="line-"].radius::after {
  border-radius: 6px !important;
}

.radius, .shadow-blur.radius::before {
  border-radius: 3px !important;
}

button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 15px 8px;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  overflow: visible;
  color: #666;
  /* background-color: #fff !important; */
  margin-left: initial;
  transform: translate(0px, 0px);
  margin-right: initial;
}

button::after, tag[class*="line-"]::after {
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  transform: scale(0.5);
  transform-origin: 0 0;
  box-sizing: border-box;
  border-radius: 6px;
  z-index: 1;
  pointer-events: none;
}

button[class*="lines"]::after {
  border: 3px solid rgba(0, 0, 0, 0.2);
}

button[class*="bg-"]::after {
  display: none;
}

button.sm {
  padding: 7px 10px 5px;
  font-size: 12px;
}

button.lg {
  padding: 16px 20px 14px;
  font-size: 16px;
}

button.icon.sm {
  width: 28px;
  height: 28px;
}

button.icon {
  width: 30px;
  height: 30px;
  padding: 0;
}

button.icon.lg {
  width: 41px;
  height: 41px;
}

button.shadow-blur::before {
  top: 2px;
  left: 2px;
  filter: blur(3px);
  opacity: 0.6;
}

button.button-hover {
  transform: translate(1px, 1px);
}

button.block {
  display: flex;
}

button[disabled] {
  opacity: 0.6;
  color: #fff;
}

/* ==================
          徽章
 ==================== */

tag {
  font-size: 12px;
  color: #666;
  vertical-align: middle;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
  padding: 6px 7px 4px;
  line-height: 1;
  background: #fff;
  font-family: Helvetica Neue, Helvetica, sans-serif;
}

tag icon {
  height: 0px;
  background: #333;
}

tag[class*="line-"]::after {
  border-radius: 0;
}

tag + tag {
  margin-left: 5px;
}

tag.sm {
  font-size: 10px;
  padding: 5px 6px 2px;
}

tag[class*="red"].saturate {
  color: #e54d42 !important;
  background: #fadbd9 !important;
}

tag[class*="orange"].saturate {
  color: #f4a040 !important;
  background: #f1ffc7 !important;
}

tag[class*="yellow"].saturate {
  color: #feb300!important;
  background: #fef2ce !important;
}

tag[class*="olive"].saturate {
  color: #8dc63f !important;
  background: #e8f4d9 !important;
}

tag[class*="green"].saturate {
  color: #39b54a !important;
  background: #d7f0db !important;
}

tag[class*="cyan"].saturate {
  color: #1cbbb4 !important;
  background: #d2f1f0 !important;
}

tag[class*="blue"].saturate {
  color: #0081ff !important;
  background: #cce6ff !important;
}

tag[class*="purple"].saturate {
  color: #6739b6 !important;
  background: #e1d7f0 !important;
}

tag[class*="mauve"].saturate {
  color: #9c26b0 !important;
  background: #ebd4ef !important;
}

tag[class*="pink"].saturate {
  color: #e03997 !important;
  background: #f9d7ea !important;
}

tag[class*="brown"].saturate {
  color: #a5673f !important;
  background: #ede1d9 !important;
}

tag[class*="grey"].saturate {
  color: #8799a3 !important;
  background: #e7ebed !important;
}

tag[class*="gray"].saturate {
  color: #aaa !important;
  background: #fadbd9 !important;
}

tag[class*="black"].saturate {
  color: #333 !important;
  background: #d6d6d6 !important;
}

tag[class*="white"].saturate {
  color: #fff !important;
  background: #fadbd9 !important;
}

capsule {
  display: flex;
}

capsule tag {
  margin: 0;
}

capsule tag[class*="line-"]:last-child::after {
  border-left: 0px !important;
}

capsule tag[class*="line-"]:first-child::after {
  border-right: 0px !important;
}

capsule.radius tag:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

capsule.radius tag:last-child::after, capsule.radius tag[class*="line-"] {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

capsule.round tag:first-child {
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  padding-right: 6px;
}

capsule.round tag:last-child::after, capsule.round tag:last-child {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  padding-left: 6px;
}

tag.badge {
  background: #dd514c;
  border-radius: 100px;
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 10px;
  padding: 4px 5px 1px;
  color: #fff;
}

tag:empty {
  padding: 4px;
  top: -2px;
  right: -2px;
}

/* ==================
          头像
 ==================== */

avatar {
  font-variant: small-caps;
  margin: 0;
  padding: 0;
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-size: cover;
  background-position: center;
  vertical-align: middle;
}

avatar text {
  transform: scale(1.2);
  display: inline-block;
}

avatar.sm {
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

avatar.lg {
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 20px;
}

avatar.xl {
  width: 64px;
  height: 64px;
  line-height: 64px;
  font-size: 32px;
}

avatar-group {
  direction: rtl;
  unicode-bidi: bidi-override;
  padding: 0 5px 0 20px;
  display: inline-block;
}

avatar-group avatar {
  margin-left: -15px;
  border: 2px solid #f1f1f1;
  vertical-align: middle;
}

avatar-group avatar.sm {
  margin-left: -10px;
  border: 1px solid #f1f1f1;
}

/* ==================
         进度条
 ==================== */

progress-bar {
  overflow: hidden;
  height: 14px;
  background-color: #ebeef5;
  display: flex;
  align-items: center;
  width: 100%;
}

progress-bar + view, progress-bar + text {
  line-height: 1;
}

progress-bar.xs {
  height: 5px;
}

progress-bar.sm {
  height: 10px;
}

progress-bar view {
  width: 0;
  height: 100%;
  align-items: center;
  display: flex;
  justify-items: flex-end;
  justify-content: space-around;
  font-size: 10px;
  color: #fff;
  background: #0081ff;
  transition: width 0.6s ease;
}

progress-bar text {
  align-items: center;
  display: flex;
  font-size: 10px;
  color: #666;
  text-indent: 5px;
}

progress-bar.text-progress {
  padding-right: 30px;
}

progress-bar.striped view {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 36px 36px;
}

progress-bar.active view {
  animation: progress-bar-stripes 2s linear infinite;
}

@keyframes progress-bar-stripes {
  from {
    background-position: 36px 0;
  }

  to {
    background-position: 0 0;
  }
}

/* ==================
          列表
 ==================== */

.grayscale {
  filter: grayscale(1);
}

list.menu {
  padding: 0 15px;
  background: #fff;
  display: block;
}

list.menu.no-padding {
  padding: 0;
}

list.menu + list.menu {
  margin-top: 10px;
}

list + list {
  margin-top: 10px;
}

list.menu > item {
  position: relative;
  line-height: 18px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  min-height: 55px;
}

list.menu > item.cur {
  background-color: #fcf7e9;
}

list.menu > item:last-child {
  border: none;
}

list.menu.no-padding > item {
  padding: 15px;
}

list.menu-avatar.no-padding > item {
  padding-left: 70px;
}

list.menu-avatar.no-padding > item avatar {
  left: 15px;
}

list.menu.no-padding > item.arrow {
  padding-right: 33px;
}

list.menu > item .content {
  line-height: 1.5;
}

list.menu > item .content > text[class*="icon"] {
  margin-right: 5px;
}

list.menu > item .action {
  text-align: right;
}

list > item.grayscale {
  background-color: #f5f5f5;
}

list.menu > item .action tag:empty {
  right: 5px;
}

list.menu > item.arrow {
  padding-right: 18px;
}

list.menu > item.arrow::after {
  font-family: "iconfont" !important;
  display: block;
  content: "\e6a3";
  position: absolute;
  font-size: 17px;
  color: #aaa;
  line-height: 15px;
  height: 15px;
  width: 15px;
  text-align: center;
  top: 1px;
  bottom: 0;
  right: 0;
  margin: auto;
}

list.menu.no-padding > item.arrow::after {
  right: 15px;
}

list.menu > item avatar-group avatar {
  border-color: #fff;
}

list.menu.card-menu {
  margin: 15px;
  border-radius: 10px;
  overflow: hidden;
}

list.menu-avatar > item > avatar {
  position: absolute;
  left: 0;
}

list.menu-avatar > item {
  padding-left: 55px;
  height: 70px;
}

list.menu > item .content tag.sm {
  font-size: 8px;
  line-height: 80%;
  padding: 4px 3px 2px;
  margin-top: -3px;
}

list.grid {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  background: #fff;
}

list.grid > item {
  display: flex;
  width: 25%;
  flex-direction: column;
  border-right: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
  padding: 15px 20px;
}

list.grid > item:nth-child(4n) {
  border-right: 0px solid #eee;
}

list.grid > item icon {
  display: block;
  width: 100%;
  height: 35px;
  line-height: 35px;
  position: relative;
  font-size: 26px;
}

list.grid > item text {
  display: block;
  color: #888;
  font-size: 25rpx;
}

list.grid.grid-mini > item {
  width: 33.33%;
  padding: 20px 25px;
}

list.grid.grid-mini > item icon {
  height: 40px;
  line-height: 40px;
}

list.grid.grid-mini > item text {
  font-size: 14px;
}

list.grid.grid-mini > item:nth-child(3n) {
  border-right: 0rpx solid #eee;
}

list.grid.grid-mini > item:nth-child(4n) {
  border-right: 1rpx solid #eee;
}

list.grid.grid-max > item {
  width: 20%;
  padding: 10px 5px;
}

list.grid.grid-max > item icon {
  height: 35px;
  line-height: 35px;
}

list.grid.grid-max > item text {
  font-size: 14px;
}

list.grid.grid-max > item:nth-child(3n) {
  border-right: 1rpx solid #eee;
}

list.grid.grid-max > item:nth-child(4n) {
  border-right: 1rpx solid #eee;
}

list.grid.grid-max > item:nth-child(5n) {
  border-right: 0rpx solid #eee;
}

list.grid.no-border {
  padding: 10px 5px;
}

list.grid.no-border > item {
  border: none !important;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ==================
          操作条
 ==================== */

bar {
  display: flex;
  position: relative;
  align-items: center;
  background: #fff;
  padding: 0px 10px;
  height: 50px;
  justify-content: space-between;
  font-size: 16px;
}

/*
bar .action:last-child text[class*="icon"]{
  margin-right  : 10px;
} */

bar .left, bar .right {
  display: flex;
  align-items: center;
  font-size: 15px;
}

bar .left > text[class*="icon"], bar .right > text[class*="icon"] {
  font-size: 14px;
  width: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
  line-height: 1.2;
  margin-right: 3px;
}

bar .right > text[class*="icon"] {
  font-size: 20px;
  margin-left: 10px;
}

bar .content {
  position: absolute;
  /* padding: 0 160rpx; */
  text-align: center;
  width: 400rpx;
  left: 0;
  right: 0;
  bottom: 15px;
  margin: auto;
  height: 20px;
  font-size: 18px;
  line-height: 1.2;
  cursor: none;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

bar.red text, bar.orange text, bar.yellow text, bar.olive text, bar.green text,
bar.cyan text, bar.blue text, bar.purple text, bar.mauve text, bar.pink text,
bar.brown text, bar.grey text, bar.black text, bar.white text {
  color: #fff;
}

bar.red .serach-form, bar.orange .serach-form, bar.yellow .serach-form,
bar.olive .serach-form, bar.green .serach-form, bar.cyan .serach-form,
bar.blue .serach-form, bar.purple .serach-form, bar.mauve .serach-form,
bar.pink .serach-form, bar.brown .serach-form, bar.grey .serach-form,
bar.black .serach-form, bar.white .serach-form {
  background: #fff;
}

bar.btn-group {
  justify-content: space-around;
}

bar.btn-group button {
  padding: 10px 16px;
}

bar.btn-group button {
  flex: 1;
  margin: 0 10px;
  max-width: 50%;
}

bar.search .action {
  display: flex;
  font-size: 14px;
}

bar.search .action .icon-triangledownfill {
  font-size: 10px;
  width: 16px;
  justify-content: center;
  align-items: center;
  display: flex;
  line-height: 1.2;
}

bar .serach-form {
  background: #f5f5f5;
  line-height: 32px;
  height: 32px;
  font-size: 12px;
  color: #666;
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0 10px;
}

bar .serach-form input {
  flex: 1;
}

bar .serach-form:first-child {
  margin-left: 0;
}

bar .serach-form:last-child {
  margin-right: 0;
}

bar .serach-form [class*="icon"] {
  width: 32px;
  text-align: center;
  display: inline-block;
  color: #666;
}

bar.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1024;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

bar.foot {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 1024;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}

bar.shop {
  padding: 0;
}

bar.shop .action {
  font-size: 12px;
  position: relative;
  flex: 1;
  text-align: center;
  /* padding: 0 10px; */
}

bar.shop [class*="icon"] {
  font-size: 18px;
  width: 50px;
  position: relative;
  display: block;
  margin: auto;
}

bar.shop .submit {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
  position: relative;
  flex: 2;
  height: 100%;
}

bar.shop .submit:last-child {
  flex: 2.6;
}

bar.shop .submit + .submit {
  flex: 2;
}

bar.shop .submit button {
  margin-left: 10px;
}

bar.shop .submit:last-child button {
  margin-left: 0px;
}

bar.shop .submit + .submit button {
  margin-left: 0px;
  margin-right: 10px;
}

bar.shop .action::after {
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.5);
  transform-origin: 0 0;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

bar.input input {
  overflow: initial;
  line-height: 32px;
  height: 32px;
  min-height: 32px;
  flex: 1;
  margin: 0 10px;
}

bar.input .action [class*="icon"] {
  margin-right: 0px;
  margin-left: 10px;
  font-size: 24px;
}

bar.input input + .action [class*="icon"] {
  margin-right: 10px;
  margin-left: 0px;
}

bar.input .action:first-child [class*="icon"] {
  margin-left: 0px;
}

custom {
  display: block;
  position: relative;
  background-color: #333;
}

custom bar {
  padding-right: 110px;
  box-shadow: 0px 0px 0px !important;
}

/* ==================
         时间轴
 ==================== */

timeline {
  display: block;
  background: #fff;
}

timeline time {
  width: 60px;
  text-align: center;
  padding: 10px 0;
  font-size: 13px;
  color: #888;
  display: block;
}

timeline > item {
  padding: 10px 10px 10px 60px;
  position: relative;
  display: block;
  color: #ccc;
  z-index: 0;
}

timeline > item::after {
  content: "";
  display: block;
  position: absolute;
  width: 1rpx;
  background: #ddd;
  left: 30px;
  height: 100%;
  top: 0;
  z-index: 8;
}

timeline > item::before {
  font-family: "iconfont";
  content: "\e763";
  display: block;
  position: absolute;
  top: 18px;
  z-index: 9;
  background: #fff;
  width: 25px;
  height: 25px;
  text-align: center;
  border: none;
  line-height: 25px;
  left: 18px;
}

timeline > item[class*="icon"]::before {
  background: #fff;
  width: 25px;
  height: 25px;
  text-align: center;
  border: none;
  line-height: 25px;
  left: 18px;
}

timeline > item > .content {
  background: #f1f1f1;
  padding: 10px;
  border-radius: 3px;
  display: block;
  color: #666;
}

timeline > item > .content + .content {
  margin-top: 10px;
}

/* ==================
         聊天
 ==================== */

chat {
  display: flex;
  flex-direction: column;
}

chat item {
  display: flex;
  padding: 15px 15px 35px;
  position: relative;
}

chat item > avatar {
  width: 40px;
  height: 40px;
}

chat item > .main {
  max-width: calc(100% - 130px);
  margin: 0 20px;
  display: flex;
  align-items: center;
}

chat item > image {
  height: 160px;
}

chat item > .main .content {
  background: #fff;
  padding: 10px;
  border-radius: 3px;
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  color: #666;
  font-size: 15px;
  position: relative;
  min-height: 40px;
  line-height: 20px;
  text-align: left;
}

chat item .date {
  position: absolute;
  font-size: 12px;
  color: #aaa;
  width: calc(100% - 160px);
  bottom: 10px;
  left: 80px;
}

chat item .action {
  padding: 0 15px;
  display: flex;
  align-items: center;
}

chat item > .main .content::after {
  content: "";
  top: 12px;
  transform: rotate(180deg);
  position: absolute;
  z-index: 100;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
  overflow: hidden;
  border-right-color: #fff;
  border-left: 8px solid #333;
  border-right: 0 dotted;
  border-left-color: #fff;
  left: -7px;
  right: initial;
}

chat item.self {
  justify-content: flex-end;
  text-align: right;
}

chat item.self > .main .content::after {
  left: auto;
  right: -7px;
  border-right: 8px solid #fff;
  border-left: 0 dotted;
}

chat item.self > .main .bg-green.content::after {
  border-right-color: #39b50a;
}

chat info {
  display: inline-block;
  margin: 10px auto;
  font-size: 12px;
  padding: 4px 6px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  color: #fff;
  max-width: 400rpx;
  line-height: 1.4;
}

/* ==================
         加载
==================== */

load {
  background: #f5f5f5;
  display: flex;
  height: 45px;
  align-items: center;
  justify-content: center;
  color: #999;
}

load.loading::after {
  content: "加载中...";
}

load.loading::before {
  content: "\e64f";
  animation: icon-spin 2s infinite linear;
  display: inline-block;
  font-family: iconfont;
  margin-right: 3px;
}

load.over::after {
  content: "没有更多了";
}

load.over::before {
  content: "\e6e5";
  font-family: iconfont;
  margin-right: 3px;
}

/* ==================
       导航条
==================== */

scroll-view ::-webkit-scrollbar {
  display: none;
}

scroll-view.nav, nav {
  height: 45px;
  /* background: #fff; */
  width: 100%;
  display: block;
  white-space: nowrap;
}

scroll-view.nav item, nav item {
  padding: 0 15px;
  display: inline-block;
  height: 45px;
  line-height: 45px;
}

scroll-view.nav item.cur, nav item.cur {
  border-bottom: 2px solid #f4a040;
  color: #f4a040;
  font-size: 28rpx;
}

nav.center {
  display: flex;
  justify-content: space-around;
}

/* ==================
         模态框
==================== */

.modal-box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1110;
  opacity: 0;
  outline: 0;
  text-align: center;
  -ms-transform: scale(1.185);
  transform: scale(1.185);
  backface-visibility: hidden;
  perspective: 1000px;
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.6s ease-in-out 0;
  pointer-events: none;
}

.modal-box::before {
  content: "\200B";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.modal-box.cur {
  opacity: 1;
  transition-duration: 0.3s;
  -ms-transform: scale(1);
  transform: scale(1);
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
}

.modal-dialog {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  width: 680rpx;
  max-width: 100%;
  background: #f8f8f8;
  border-radius: 10rpx;
  overflow: hidden;
}

.modal-title {
  padding: 20rpx;
  font-size: 32rpx;
  background: #fff;
  margin-bottom: 1rpx;
  line-height: 60rpx;
}

.modal-close {
  position: absolute;
  top: 0rpx;
  right: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: transparent;
  color: #fc5d75;
}

.modal-bd {
  text-align: left;
  background: #fff;
}

.modal-message {
  padding: 50rpx 30rpx;
  line-height: 1.4;
}

.modal-option {
  background: #fff;
  display: flex;
  text-align: center;
  border-top: 1rpx solid #eee;
  align-items: center;
}

.modal-option-btn {
  flex: 1;
  line-height: 100rpx;
}

.modal-option-btn+.modal-option-btn {
  border-left: 1rpx solid #eee;
}

.modal-box.bottom-modal::before {
  vertical-align: bottom;
}

.modal-box.bottom-modal .modal-dialog {
  width: 100%;
  border-radius: 0;
}

.modal-box.bottom-modal {
  margin-bottom: -500px;
}

.modal-box.bottom-modal.cur {
  margin-bottom: 0;
}

.single-modal {
  background: #fff;
  text-align: center;
  padding: 20rpx;
}

.single-modal-item {
  background: #f5f5f5;
  float: left;
  margin-bottom: 20rpx;
  border-radius: 3px;
  line-height: 36rpx;
  padding: 20rpx;
  text-align: center;
  font-size: 32rpx;
  width: 32%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-right: 2%;
  color: #666;
}

.single-modal-item:nth-child(3n) {
  float: right;
  margin-right: 0;
}

.single-modal-item.cur {
  background: #f4a040;
  color: #fff;
}
